<template>
  <div class="common-layout">
    <el-container style="height: 100%">
      <el-aside width="auto">
        <el-menu
          :default-openeds="['1']"
          router
          background-color="rgb(32, 32, 79)"
          :collapse="store.collapse"
          :default-active="route.path"
          text-color="white"
        >
          <h4>
            <span
              ><img
                src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/3c6d55fbb2fb4316e423e29121a4462309f7d319.jpg"
                alt="" /></span
            ><span v-if="!store.collapse">自由之翼</span>
          </h4>
          <el-menu-item index="/dashboard/welcome"
            ><el-icon> <Location /> </el-icon
            ><span v-show="!store.collapse" @click="aa"
              >欢迎页面</span
            ></el-menu-item
          >
          <el-sub-menu
            v-for="(item, index) in store.navlist"
            :key="item.id"
            :index="index + ''"
            v-show="item.id != 1"
          >
            <template #title>
              <el-icon>
                <Location />
              </el-icon>
              <span>{{ item.auth_name }}</span></template
            >
            <el-menu-item
              v-for="(item2,index2) in item.children" :key="index2"
              :index="item2.auth_path"
              >{{ item2.auth_name }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <span @click="chancollapse">
            <el-icon size="20" v-if="!store.collapse"><Fold /></el-icon>
            <el-icon size="20" v-if="store.collapse"><Expand /></el-icon>
            <span>你好:{{ accountInfo.username + "/" + accountInfo.role }}</span>
           
          </span>

          <span @click="unlogin">注销登录</span>
        </el-header>
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getadmininfo, yjjwt } from "../service/admin";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Expand,
  Menu as IconMenu,
  Location,
  Fold,
} from "@element-plus/icons-vue";
import { useCounterStore } from "../store";
let route = useRoute();
let accountInfo = ref("");
let router = useRouter();
let store = useCounterStore();
onMounted(() => {
  yjjwt().then((res) => {
    console.log(res);
  });
  getadmininfo().then((res) => {
    console.log(res);
    accountInfo.value = res.data.accountInfo;
  });
});
function chancollapse() {
  store.changecollapse();
}
function unlogin() {
  ElMessageBox.confirm("你确定要注销登录吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "注销成功",
      });
      // store.setnavlist([]);
      localStorage.removeItem("Authorization");
      router.push("/login");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消",
      });
    });
}
</script>

<style lang="scss" scoped>
.common-layout {
  width: 100%;
  height: 100%;
  // background-color: rgb(32, 32, 79);
}
h4 {
  width: 100%;
  height: 60px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: burlywood;
  margin: 0;
  img {
    width: 40px;
    display: block;
  }
}
.el-main {
  background-color: #ccc;
  width: 100%;
  height: 100%;
}
.el-aside {
  height: 100%;
  background-color: rgb(32, 32, 79);
  color: white;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span{
    padding: 10px;
    display: flex;
    align-items: center;
    
  }
}
</style>
